<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script>
		
		
			function myfunc(){
				
				alert("自定义的处理函数")
				// .......
				
			}
		
			function inputBlur(inp){
				console.log("文本框的失去Blur焦点事件.....,用于表单验证");
				console.log("inp: "+inp.value);
				if(parseFloat(inp.value)>200){
					alert("请输入正确的年龄")
				}
				
				
			}
			
			function inputFocus(){
				console.log("文本框的获取focus焦点事件.....")
			}
			
			/**
			 * inputDblclick 双击事件
			 */
			
			function inputDblclick(){
				console.log("双击执行...")
			}
			
			
			/**
			 * 鼠标按下：
			 */
			function mouseDownEvent(){
				
				//获取事件信息（事件对象）;
				let e = window.event;
				console.log("鼠标按下: e ",e);
			}
			
			function mouseUpEvent(){
				console.log("鼠标抬起:");
			}
			
			
			/**
			 * 鼠标进入 mouseEnter
			 */
			function mouseEnter(){
				let e = window.event;
				console.log("鼠标进入div: x: %d, y:%d",e.x ,e.y);
			}
		
		
			function mouseLeave(){
				let e = window.event;
				// console.log("鼠标离开div: x: %d, y:%d",e.x ,e.y);
				console.log("鼠标离开div: x: %d, y:%d",e.offsetX ,e.offsetY);
			}
			
			function mouseMove(){
				let e = window.event;
				// console.log("鼠标离开div: x: %d, y:%d",e.x ,e.y);
				console.log("移动到-->: x: %d, y:%d",e.offsetX ,e.offsetY);
			}
			
			
			
		</script>
	</head>
	<body>
		
		
		<button type="button"  onclick="alert('按钮被点击了')">可以点击的按钮</button>
		<button type="button"  onclick="myfunc()">使用自定义方法接受click事件</button>
		
		<br>
		姓名 :<input type="text"  value="" ondblclick="inputDblclick()" /> <br>
		年龄 :<input type="text" onblur="inputBlur(this)"   onfocus="inputFocus()"  value="" /> <br>
		
		<div  style="width: 300px;height: 200px;border: solid 1px grey;cursor:pointer"
		
			onmousedown="mouseDownEvent()"
			onmouseup="mouseUpEvent()"
			
		>
			
			
		</div>
		
		
		<div  style="width: 300px;height: 200px;border: solid 1px grey;cursor:pointer"
		
			onmouseenter="mouseEnter()"
			onmouseleave="mouseLeave()"
			onmousemove="mouseMove()"
		>	
		</div>
		
		
		
	</body>
</html>
